import {
    Button,
    Card,
    CardHeader,
    CardFooter,
    Divider,
    Link,
    Modal,
    ModalBody,
    ModalContent,
    ModalHeader, 
    Chip, 
    Spacer,
    Accordion,
    AccordionItem
} from "@nextui-org/react";
import React from "react";
import { NoteIcon } from "@/app/assets/icons/NoteIcon";
import { CardBody } from "@nextui-org/card";

/**
 * 设置中心组件
 * @param isOpenSet
 * @param onOpenSetChange
 * @constructor
 */
export default function SettingPage({ isOpenSet, onOpenSetChange }: any) {
    return (
        <Modal
            backdrop="blur"
            isOpen={isOpenSet}
            placement={'auto'}
            onOpenChange={onOpenSetChange}
            size="lg"
        >
            <ModalContent>
                {(onClose) => (
                    <>
                        <ModalHeader className="flex flex-col gap-1 dark:text-white light:text-black">设置中心</ModalHeader>
                        <ModalBody>
                            <Card className="w-full" shadow={'none'}>
                                <CardHeader className="flex gap-3">
                                    <NoteIcon />
                                    <div className="flex flex-col">
                                        <p className="text-md">Me Notes</p>
                                        <p className="text-small text-default-500">个人在线云储笔记微服务平台</p>
                                    </div>
                                    <Chip variant={'dot'} color={"success"} size={'sm'}>v1.0.0</Chip>
                                </CardHeader>
                                <Divider />
                                <CardBody>
                                    <p className="py-2">开源、免费的笔记云储平台，以数字化的方式存储与共享文档，使得信息流向正确的方向。</p>
                                    
                                    <Accordion>
                                        <AccordionItem key="1" title="项目信息" aria-label="项目信息">
                                            <div className="space-y-2">
                                                <p><strong>项目名称:</strong> 基于Spring Cloud+React个人在线云储笔记微服务平台开发</p>
                                                <p><strong>学校:</strong> 北方民族大学</p>
                                                <p><strong>学院:</strong> 计算机科学与工程学院</p>
                                                <p><strong>专业:</strong> 软件工程</p>
                                            </div>
                                        </AccordionItem>
                                        <AccordionItem key="2" title="技术栈" aria-label="技术栈">
                                            <div className="flex flex-wrap gap-2">
                                                <Chip color="primary" variant="flat">Spring Cloud</Chip>
                                                <Chip color="primary" variant="flat">React</Chip>
                                                <Chip color="primary" variant="flat">Next.js</Chip>
                                                <Chip color="secondary" variant="flat">Docker</Chip>
                                                <Chip color="secondary" variant="flat">Kubernetes</Chip>
                                                <Chip color="warning" variant="flat">MySQL</Chip>
                                                <Chip color="warning" variant="flat">MongoDB</Chip>
                                                <Chip color="warning" variant="flat">Redis</Chip>
                                                <Chip color="danger" variant="flat">OAuth2.0</Chip>
                                                <Chip color="danger" variant="flat">SM4加密</Chip>
                                            </div>
                                        </AccordionItem>
                                        <AccordionItem key="3" title="关于作者" aria-label="关于作者">
                                            <div className="space-y-2">
                                                <p><strong>作者:</strong> 阿卜杜热伊木·居麦尼亚孜</p>
                                                <p><strong>学号:</strong> 20212255</p>
                                                <p><strong>年级:</strong> 2021级</p>
                                                <p><strong>指导教师:</strong> 任荣</p>
                                            </div>
                                        </AccordionItem>
                                    </Accordion>
                                </CardBody>
                                <Divider />
                                <CardFooter className="flex justify-between">
                                    <p className="text-small text-default-500">© 2025 北方民族大学毕业设计</p>
                                    <Link
                                        isExternal
                                        showAnchorIcon
                                        href="https://gitee.com/uyevan/wow-note-spring"
                                    >
                                        Gitee 仓库
                                    </Link>
                                </CardFooter>
                            </Card>
                        </ModalBody>
                    </>
                )}
            </ModalContent>
        </Modal>
    )
}